<template>
  <button @click="count--">-</button>
  <input v-model="count" />
  <button @click="count++">+</button>
</template>
<script>
export default {
  name: 'steperCom',
  props: {
    value: { type: Number, default: 1 }
  },
  data() {
    return {
      count: this.value
    }
  },
  beforeCreate() {
    // 组件创建前能拿到props 和this
    console.log('props.value', this.value, this.count)
  },
  watch: {
    count: {
      handler() {
        // 当组件发生变化时，发送change事件
        this.$emit('change', this.count)
      }
    }
  }
}
</script>
